$default-swatch-size: 100px;

@mixin palette-swatch ( $size:"" ) {

  // if a size isn't specified, use the default size.
  @if $size =="" { $size: $default-swatch-size; }

  width: $size;
  height: $size;
  display: inline-block;

  @include border-radius( 50% );
  @include box-shadow( 0 1px 2px 0 rgba(0,0,0, 0.4) );


  // todo use @function to count the number of colors in palette
  // and then use a @for loop to dynamically build this list.
  //
  // this goes through all of the colors in your palette.
  &:nth-of-type(1)  { background-color: $greyblue; }
  &:nth-of-type(2)  { background-color: $blackblue; }
  &:nth-of-type(3)  { background-color: $lightblue; }
  &:nth-of-type(4)  { background-color: $darkblue; }
  &:nth-of-type(5)  { background-color: $lightgreen; }
  &:nth-of-type(6)  { background-color: $darkgreen; }
  &:nth-of-type(7)  { background-color: $brightred; }
  &:nth-of-type(8)  { background-color: $darkred; }
  &:nth-of-type(9)  { background-color: $brick; }
  &:nth-of-type(10) { background-color: $lightpurple; }
  &:nth-of-type(11) { background-color: $darkpurple; }
  &:nth-of-type(12) { background-color: $lightorange; }
  &:nth-of-type(13) { background-color: $darkorange; }
  &:nth-of-type(14) { background-color: $pink; }
  &:nth-of-type(15) { background-color: $maroon; }
} // @mixin palette-discs
